<template>
  <Modal
    v-model:active="fillHoleModalActive"
    transfer
    title="填孔"
    hide-mask
    draggable
    :no-footer="true"
    @close="handleCancel"
    :width="500"
  >
    <div class="title">
      <div class="title_color"></div>
      <div class="title_content">选择器</div>
    </div>
    <div class="selector-buttons">
      <button class="selector-button active">组件</button>
      <button class="selector-button icon-button">
        <img src="../../assets/delete.svg" alt="" class="icon imgStyle" />
      </button>
    </div>
    <div class="selector-options">
      <CheckboxGroup v-model:value="checkOptions">
        <Checkbox class="CheckboxStyle" label="together"
          >同时填孔</Checkbox>
        <Checkbox class="CheckboxStyle" label="smooth">光顺</Checkbox>
        <Checkbox class="CheckboxStyle" label="checkNormal"
          >检查法向</Checkbox
        >
      </CheckboxGroup>
    </div>
    <div class="foot-box">
      <Button type="primary" @click="confirm">填孔</Button>
      <Button @click="handleCancel">取消</Button>
    </div>
  </Modal>
</template>
<script setup lang="ts">
import { Modal, Checkbox, CheckboxGroup, Button, Notice } from "cax-ui";
import { useMeshEditStore } from "@/UI/store/meshEditStore";
import { storeToRefs } from "pinia";
import { ref, watch } from "vue";
import { _global } from "@/UI/store";
import { FillHoleOptions, STATUS_CODE } from "@/FrontProcessing";

const meshEditStore = useMeshEditStore();
const { fillHoleModalActive } = storeToRefs(meshEditStore);

// 选项状态 - 使用CheckboxGroup
const checkOptions = ref<Array<'together' | 'smooth' | 'checkNormal'>>(["smooth"]); // 默认选中"光顺"选项

function confirm() {
  const param: FillHoleOptions = {
    checkNormal: 0,
    smooth: 0,
    together: 0,
  }
  checkOptions.value.forEach(item => {
    param[item] = 1
  })
  _global.Engine.mesh.fillHole(param)
    .then(res => {
      console.log("fill hole res: ", res)
      Notice.success("已填孔")
      fillHoleModalActive.value = false;
    })
    .catch(err => {
      Notice.error('没找到选中的组件')
    })
}
function handleCancel() {
  fillHoleModalActive.value = false;
}

watch(fillHoleModalActive, (open) => {
  if (open) {
    _global.Engine.state.set("Mode", STATUS_CODE.GEOM_BODY);
  } else {
    _global.Engine.state.set("Mode", STATUS_CODE.NORMAL);
  }
})
</script>

<style scoped>
.selector-buttons {
  display: flex;
  justify-content: center;
  /* align-items: center; */
}

.selector-button {
  height: 32px;
  width: 200px;
  padding: 0 15px;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
  outline: none;
}

.selector-button.active {
  background-color: #e6f7a7;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  /* flex-grow: 1; */
  font-weight: normal;
}

.icon-button {
  width: 32px;
  padding: 3px 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-left: none;
  background-color: #fff;
}

.icon-arrow {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
}

.icon-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #1e88e5;
}

.selector-options {
  display: flex;
  margin-top: 24px;
  padding-left: 5px;
}

/* 调整CUX-UI的CheckboxGroup样式以匹配设计 */
:deep(.cux-checkbox-group) {
  display: flex;
  gap: 30px;
}

:deep(.cux-checkbox) {
  margin-right: 0;
}
.CheckboxStyle {
  margin-left: 60px;
}
.imgStyle {
  width: 100%;
  height: 100%;
}
.title {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 16px;
  margin-bottom: 16px;

  .title_color {
    width: 4px;
    height: 12px;
    background: #339af0;
    margin-right: 8px;
  }
  .title_content {
    opacity: 1;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    /* content/主要一级primary */
    /* 样式描述：--vxp-content-color-primary */
    color: #212529;
  }
}
.foot-box {
  margin-top: 40px;
  width: 100%;
  height: 40px;
  text-align: right;
}
</style>
